<!doctype html>
<html lang="en" data-ng-app="CarmenSandiegoApp">
<head>
<title>Carmen Sandiego</title>


<link rel="stylesheet" href="stylesheets/carmenSanDiego.css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="stylesheets/carmenSanDiego.css" />

<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
<!-- JQUERY -->
<!-- JQUERY -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="javascripts/app.js"></script>


</head>


<body data-ng-controller="CarmenController">

	<div class="container">

		<div class="page-header">
			<h1>
				Carmen San Diego <small>(angular)</small>
			</h1>
		</div>


		<div class="row">
			<div class="col-md-12"></div>
		</div>

		<div class="row">
			<div id="lug" class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading">Estas en:</div>
					<div class="panel-body">
						<div class="panel-body">
							<h3>{{paisActual.nombre}}</h3>
						</div>
					</div>
				</div>
			</div>


			<div class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading">Antes:</div>
					<div class="panel-body">
						<ul>
							<h3>
								<li class="checkbox-inline"
									data-ng-repeat="pais in paisesAnteriores">{{pais}}</li>
							</h3>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div id="lug" class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<div class="panel-heading">
						<h3>{{paisActual.lugar1.nombre}}</h3>
					</div>
					<img src="images/{{paisActual.lugar1.nombre}}.jpg" height="100" width="100"
						alt="...">
					<div class="caption">


						<form method="post">
						<button type="submit" class="btn btn-primary"
								data-ng-click="darInfoLugar1()">
								<span class="glyphicon glyphicon-eye-open"></span> Ver Pistas
							</button>
						</form>

					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<div class="panel-heading">
						<h3>{{paisActual.lugar2.nombre}}</h3>
					</div>
					<img src="images/{{paisActual.lugar2.nombre}}.jpg" height="100" width="100"
						alt="...">
					<div class="caption">
						<form method="post">
							<button type="submit" class="btn btn-primary"
								data-ng-click="darInfoLugar2()">
								<span class="glyphicon glyphicon-eye-open"></span> Ver Pistas
							</button>
						</form>
					</div>
				</div>
			</div>


			<div id="lug" class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<div class="panel-heading">
						<h3>{{paisActual.lugar3.nombre}}</h3>
					</div>
					<img src="images/{{paisActual.lugar3.nombre}}.jpg" height="100" width="100"
						alt="...">
					<div class="caption">
						<form method="post">
							<button type="submit" class="btn btn-primary"
								data-ng-click="darInfoLugar3()">
								<span class="glyphicon glyphicon-eye-open"></span> Ver Pistas
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<br />

		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading">Viajar</div>
					<div class="panel-body">
						<div class="col-sm-4">
							<select data-ng-model="paisSeleccionado">
								<option data-ng-repeat="pais in conexiones">{{pais}}</option>
							</select>
						</div>

						<div class="col-sm-4">
							<form method="post">
								<button type="submit" class="btn btn-primary"
									data-ng-click="viajarA()"
									>Viajar</button>
							</form>
						</div>

					</div>
				</div>
			</div>
<!-- value="Reload Page" onClick="window.location.reload()" -->

			<div class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading">Orden de arresto:</div>
					<div class="panel-body">
						<select data-ng-model="ordenDeArresto" id="villano">
							<option data-ng-repeat="villano in villanos">
								{{villano}}</option>

						</select>
						<div class="col-md-4">
							<form method="post">
								<button type="submit" class="btn btn-primary"
									data-ng-click="emitirOrden()">
									<span class="glyphicon glyphicon-plane"></span> Emitir Orden
								</button>
							</form>
							<div class="panel-body">
								<h6>Oden De Arresto Emitida a: {{ordenDeArresto}}</h6>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="verPistas" class="modal fade" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h2>pistas</h2>
					</div>
					<div class="modal-body">
						<p>{{lugar1.pistas}}</p>
					</div>
				</div>
			</div>
		</div>


	</div>
	<!-- 		<div class="col-md-4">
				<div class="panel panel-info">
					<div class="panel-heading">pistas:</div>
					<div class="panel-body">
						<p>Seleccionar lugar</p>
					</div>
				</div>
			</div>
		</div>

 -->


	<!-- cierra cont -->
</body>

</html>